<template>
  <div class="pageMenuHome" v-if="isShow" :style="pointStyle">
    <div v-for="(it,index) of data" :key="index">
      <div class="line" v-if="it=='-'"></div>
      <div class="itemHome" v-else @mouseout="onItemHoverOut(index)" @mouseover="onItemHover(index,it)">
        <div class="item" @mousedown.stop="onItemClick(it,index)">
          <span>{{it.title||it}}</span>
          <i class="el-icon-arrow-right" v-if="it.list"></i>
        </div>
        <div class="list" v-if="it.list">
          <div v-for="(listIt,listIndex) of it.list" :key="listIndex">
            <div class="line" v-if="listIt=='-'"></div>
            <div class="list-item" @mousedown.stop="onItemClick(listIt,index,listIndex)" v-else>{{listIt.title||listIt}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "auContextMenu",
  data(){
    return {
      selectIndex:-1,
      point:{
        x:0,
        y:0
      },
      isShow:false
    }
  },
  props:{
    data:{
      type:Array,
      default(){
        return [
          {
            title:'111',
            list:[
                "你好",
                '-',
                "好个屁",
            ]
          },
          '-',
          {
            title:'222'
          },
          '-',
        ]
      }
    }
  },
  watch:{
  },
  computed:{
    pointStyle(){
      return {
        left:this.point.x+"px",
        top:this.point.y+"px",
      }
    }
  },
  methods:{
    onItemHover(index){
      this.selectIndex=index;
      this.$emit('on-hover',index,this.data[index])
    },
    onItemHoverOut(index){
      this.selectIndex=-1
      this.$emit('on-hover-out',index,this.data[index])
    },
    onItemClick(it,index,itemIndex){
      if(it.list){
        return false;
      }
      if(it.click){
        it.click(it,index,itemIndex)
      }else{
        this.$emit('on-click',it,index,itemIndex)
      }

      this.hide();
    },
    show(e){
      this.point.x=e.pageX;
      this.point.y=e.pageY;
      this.isShow=true;
      let fn=(e)=>{
        this.hide();
        document.body.removeEventListener('mousedown',fn);
      }
      document.body.addEventListener('mousedown',fn);
    },
    hide(){
      this.isShow=false;
    }
  },
}
</script>

<style scoped lang="scss">
.pageMenuHome{
  position: fixed;
  top: 100px;
  left: 100px;
  color: #444;
  display: inline-block;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 0 6px rgba(0,0,0,.04);
  z-index: 999;
}
.itemHome{
  position: relative;
  &:hover{
    .item{
      color: #409eff;
      background-color: #f2f8fe;
    }
    .list{
      display: block;
    }
  }
  .list{
    display: none;
    position: absolute;
    width: 100px;
    top: 0;
    right: -100px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 0 6px rgba(0,0,0,.04);
    .list-item{
      padding: 4px 20px;
      box-sizing:border-box;
      cursor: pointer;
      &:hover{
        color: #409eff;
        background-color: #f2f8fe;
      }
    }
  }
}
.item{
  cursor: pointer;
  padding: 10px 20px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
  width: 130px;
  height: 40px;
  box-sizing: border-box;
  align-items: center;
}
.line{
  border-bottom: 1px solid #ebebeb;
  box-sizing: border-box;
  height: 1px;
}
</style>
